<template>
  <div class="container couponss">
    <div class="coupons-list" v-if="list">
      <ant-coupons v-for="(item,index) in list" :data="item" :key="index" :selectCoupons="selectCoupons"></ant-coupons>
    </div>

    <i-load-more v-if="!list" :tip="'无可用红包'" :loading="loading" />
    <i-load-more v-if="list" :tip="'没有更多无可用红包了'" :loading="loading" />

  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  import AntCoupons from '@/components/coupons'
  import request from "@/api/request";
  export default {
    components: {
      AntCoupons
    },
    data() {
      return {
        list: null,
      };
    },
    computed: {
      ...mapState(['couponsList'])
    },
    methods: {
      ...mapMutations(['setCouponsList', 'setUseCoupons']),
      getReds(option) {
        request.getReds(option).then(res => {
          this.list = res.data
        });
      },
      selectCoupons(data) {
        if (this.$route.query.type) {
          this.setUseCoupons(data)
          this.$router.back()
        }
      },
    },
    mounted() {
      let query = {}
      if (this.$route.query.type) {
        query = {
          order_amount: this.$route.query.order_amount - 0
        }
      }
      this.getReds(query);
    }
  };

</script>

<style lang="less">
  .coupons-list {
    padding: 15px;

    .coupons {
      margin-bottom: 15px;
    }
  }

</style>
